<template>
  <div class>
    <div
      v-if="showInfo"
      class="cesiumdialog"
      :style="{ left: (winPos[0] - 62) + 'px', bottom: winPos[3] + 'px' }"
    >
      <i
        class="el-icon-close"
        style="position: absolute;right: 10px;top: 10px;cursor: pointer;"
        @click="closebox()"
      ></i>
      <div v-html="diahtml"></div>
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";
export default {
  name: "cardmsgzhengzhou",
  props: {
    diahtml: "",
    options: {}
  },
  components: {},
  data() {
    return {
      winPos: [0, 0, 0, 0],
      showInfo: true,
      uniqueID: ""
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {
    winPos: {
      handler: function(n, o) {
        //判断位置与窗口偏移
        
        let width = document.documentElement.clientWidth
        let height = document.documentElement.clientHeight

        let offwidth = n[0]
        let offheight = n[1]
        
        let reswidth = width - offwidth
        let resheight = height - offheight

        if (reswidth < 120 || resheight < 20 || reswidth > width || resheight >  height) {
          this.showInfo = false
        }else{
          this.showInfo = true
        }

      }
    }
  },
  mounted() {
    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 300,
        show: false
      }
    });

    this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = [
      this.options.position.longitude,
      this.options.position.latitude,
      this.options.position.height
    ];
    XE.MVVM.track(this, "winPos", pin1, "winPos");
  },
  methods: {
    closebox() {
      //删除pin数组
      let pinarr = _.cloneDeep(this.$parent.pinarr);
      pinarr.map((item, index) => {
        if (item == this.options.uid) {
          this.$parent.pinarr.splice(index, 1);
        }
      });

      //删除_earth.children对象
      
      
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });


      // let earthchild = this.$root._earth.sceneTree.root.children.map(item =>{
      //   return item.ref
      // })
      // console.log(earthchild);
      
      // earthchild.map((eactpin, index) => {
      //   if (eactpin == this.options.uid) {
      //     this.$root._earth.sceneTree.$refs[this.options.uid].destroy()
      //     // this.$root._earth.sceneTree.root.children.splice(index, 1);
      //   }
      // });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.msgboxarr);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.msgboxarr.splice(index, 1);
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>